import React, { useState } from 'react'
import { Button } from 'antd'
import './css/Vote.css'
//官方建议是：需要多个状态，就把useState执行多次即可
function Vote(props) {
    let [supNum,setSupNum] = useState(0);
    let [oppNum,setOppNum] = useState(0);
    const handler = (prop) => {
        if (prop === 'opp') {
            setOppNum(++oppNum)
            return;
        }
        setSupNum(++supNum);
    }
    return <div className='main'>
        <div className='titleMain'>
            <h3>{props.title}</h3>
            <div>
                {supNum + oppNum}
            </div>
        </div>
        <hr />
        <div className='people'>
            <div>
                支持人数:{supNum}人
            </div>
            <div>
                反对人数:{oppNum}人
            </div>
        </div>
        <div>
            <Button type='primary' onClick={handler.bind(null, 'sup')}>支持</Button>
            <Button type='primary' danger onClick={handler.bind(null, 'opp')}>反对</Button>
        </div>
    </div>
}
export default Vote
/**
 * 执行一次useState：把需要的状态信息都放在对象中统一管理
 *  +执行setState方法的时候，传递的是啥值，就把状态"整体"改为啥值
 *  setState({
 *      supNum:state.supNum+1
 *  })
 *  =>把状态值修改为{spuNum:11},oppNum成员就丢失了
 *  =>并不会像类组件中的this.setState一样，不支持部分状态的更新
 *  + 应该改为以下的处理方案
    *  setState({
            ...state,//在修改之前，先把原有的所有状态，都展开赋值给新的对象，再去修改要改动的那一项值即可
            supNum: state.supNum + 1
        })
 */
/* function Vote(props){
    let [state,setState] = useState({
        supNum:0,
        oppNum:0
    });
    const handler = (prop)=>{
        if(prop === 'opp'){
            setState({
                ...state,
                oppNum: state.oppNum + 1
            })
            return;
        }
        setState({
            ...state,
            supNum: state.supNum + 1
        })
    }
    return <div className='main'>
        <div className='titleMain'>
            <h3>{props.title}</h3>
            <div>
                {state.supNum + state.oppNum}
            </div>
        </div>
        <hr />
        <div className='people'>
            <div>
                支持人数:{state.supNum}人
            </div>
            <div>
                反对人数:{state.oppNum}人
            </div>
        </div>
        <div>
            <Button type='primary'onClick={handler.bind(null,'sup')}>支持</Button>
            <Button type='primary' danger onClick={handler.bind(null,'opp')}>反对</Button>
        </div>
    </div>
}
export default Vote */